<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ddd</title>
    <link rel="stylesheet" href="//bootswatch.com/flatly/bootstrap.css"/>
    <link rel="stylesheet" href="main.css" />
</head>

<body>
<div id="app">
    <router-view></router-view>
</div>

<template id="login">
    <div style="width: 500px; text-align: center; margin: 0 auto; margin-top: 200px;">
        <input type="text" placeholder="请输入用户名">
        <input type="password" placeholder="请输入密码">
        <button @click="gohome">登录</button>
    </div>
</template>

<template id="home">
    <div>
        <div class="col-xs-2 col-xs-offset-2">
            <div class="list-group">
                <router-link  to='/home' class="list-group-item">Home</router-link>
                <router-link  class="list-group-item" to='/about'>About</router-link>
                <strong v-on:click="goHome()">返回主页</strong>
                <span v-on:click="changTxt('Home')">click me</span>

            </div>
        </div>
    <div>
        <h1>Home</h1>
        <p>{{msg}}</p>
    </div>
    <div style="width: 900px; margin: 0 auto">
        <button @click="goback">返回上一级</button>
        <ul class="nav nav-tabs">
            <li v-for="todo in todos">
                <router-link :to="{name:'news',params: {deviceId:todo.deviceId,dataId:todo.dataId}}">{{todo.text}}</router-link>
                <!--<router-link :to="{path:'home/news',query: {deviceId:111,dataId:222}}">{{todo.text}}</router-link>-->
                <!--<router-link to="/home/news/1111/222">{{todo.text}}</router-link>-->
            </li>
            <li>
                <router-link to="/home/message">Messages</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
    </div>
</template>



<template id="news">
    <div>
    <ul>
        <li v-on:click="resetdata">News 01{{mm}}</li>
        <li>News 02</li>
        <li>News 03</li>
    </ul>
        <router-view></router-view>
    </div>
</template>
<template id="message">
    <ul>
        <li>Message 01</li>
        <li>Message 02</li>
        <li>Message 03</li>
    </ul>
</template>

<template id="about">
    <div>
    <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
            <router-link to='/home' class="list-group-item">Home</router-link>
            <router-link class="list-group-item" to='/about'>About</router-link>
        </div>
    </div>
    <div>
        <h1>About</h1>
        <p>This is the tutorial about vue-router.</p>
        <pre>
            声明式	                编程式
        router-link :to="..."	   router.push(...)
            该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

            // 字符串
            router.push('home')

            // 对象
            router.push({ path: 'home' })

            // 命名的路由
            router.push({ name: 'user', params: { userId: 123 }})

            // 带查询参数，变成 /register?plan=private
            router.push({ path: 'register', query: { plan: 'private' }})
        </pre>
    </div></div>
</template>

</body>
<script src="../js/vue.min.js"></script>
<script src="../js/vue-router.js"></script>
<script>

    var Login = Vue.extend({
        template: '#login',
        methods:{
           gohome:function(){
               console.log("test")
               this.$router.push({path:'/home'})
           }
        }
    })
    var Home = Vue.extend({
        template: '#home',
        data: function() {
            return {
                msg: 'Hello, vue router!',
                todos: [
                    { deviceId:12345,dataId:"564656",text: 'Learn JavaScript' },
                    { deviceId:12342,dataId:"562226",text: 'Learn Vue.js' },
                    { deviceId:12335,dataId:"564656",text: 'Build Something Awesome' }
                ]
            }
        },
        methods:{
            goback:function(){
//                利用router的go返回上一页 具体查看文档
                router.go(-1)

//                新增的方法:
//                router.back()
//                router.forward()
            },
            changTxt:function(showData){
                alert("text")
                this.msg=showData
            },
            goHome:function(){
                this.$router.push({path:'/home'})
            }
        }
    })

    var News = Vue.extend({
        template: '#news',
        data: function() {
            return {
                mm: "who",
            }
        },
        mounted: function(){
            console.log('deviceid: ' + this.$route.params.deviceId);
            console.log('dataId: ' + this.$route.params.dataId);
        },
        methods: {
            resetdata: function () {
                this.mm=5456;
//            设置data中的值
                console.log(this.mm);
            }

        }
    })

    var Message = Vue.extend({
        mounted:function(){
            // 组件创建完后获取数据，
            // 此时 data 已经被 observed 了
            console.log('组件创建完后获取数据')
        },
        template: '#message',
        methods:{
            fetchData:function(){
                console.log("路由监控")
            }
        }
    })

    var About = Vue.extend({
        template: '#about',
//        mounted:function(){
//            document.title = "login"
//            console.log( this.$router)
//        }
    })
    //创建路由表
    var routes = [
        {path:'/',redirect: '/login' },
        {
            path: '/home', component: Home,
            children: [
                {path:'/home',redirect: 'message' },
                {path: 'message', component: Message},
                {
                    path: 'news/:deviceId/:dataId',
                    name:'news',
                    component: News,
                    meta:{name:'列表中心 动态路由'}
                }
            ]
        },
        {
            path: '/about',
            component: About,
            meta:{name:'Who am I ?',title:"关于我们"}
        },
        {
            path: '/login',
            component: Login,
            meta:{name:'login'}
        }
    ]
    // 创建 router 实例，然后传 `routes` 配置
    router = new VueRouter({
        mode: 'hash',
//        base: __dirname,
        routes: routes
    })
//利用路由的钩子修改网站标题  在这里定义的是全局
    router.beforeEach(function(to, from, next){
        console.log(to)
        if(to.meta.name)
        {document.title = to.meta.name}
    next()//确保要调用next
    })

    //    创建和挂载根实例
//    const app = new Vue({        router    }).$mount('#app')


    new Vue({ router:router }).$mount('#app')

</script>

</html>